//
// Notifications
// --------------------------------------------------

// Base styles
// -------------------------
.@{notification-ns} {
  .ie-text-align(right);

  &-notify &-notice {
    position: relative;
  }

  &-content {
    // Hack display:contents to make sure width adaptive content.
    .ie-display(table);
  }

  // Fixed: The problem of wide width in IE browser.
  &-notify,
  &-notify &-notice-wrapper {
    max-width: @notify-max-width;
  }

  // Notification content
  &-notify &-notice-content {
    background: @notify-default-bg;
    box-shadow: @notify-box-shadow;
    padding: @notify-padding;
    border-radius: @notify-border-radius;
    max-width: @notify-max-width;
    // Hack display:contents to make sure width adaptive content.
    .ie-display(table);
  }

  // Title
  &-notify &-title {
    .ellipsis;
    .ie-text-align(left);

    color: @notify-title-font-color;
    font-size: @notify-title-font-size;
    line-height: unit(@notify-title-icon-size/@notify-title-font-size);

    > p {
      margin: 0;
    }

    .@{ns}icon {
      font-size: @notify-title-icon-size;
      width: @notify-title-icon-size;
      line-height: 1;
      margin-right: @notify-title-icon-margin;
    }
  }

  // Description
  &-notify &-description {
    color: @notify-description-color;
    // Hack display:contents to make sure width adaptive content.
    .ie-display(table);
  }

  // Has title and description need to ajust distance
  &-notify &-title + &-description {
    margin-top: @notify-title-description-gap;
  }

  // Notification close button
  &-notify &-notice-close {
    position: absolute;
    top: @notify-close-btn-margin;
    right: @notify-close-btn-margin;
    font-size: @notify-close-btn-font-size;
    line-height: 1;
    outline: none !important;
    color: @nofify-close-btn-color;
    cursor: pointer;

    &-x::before {
      .icon-font;

      content: @default-close-btn-content;
    }
  }

  // Animations
  &-notify &-fade-entered,
  &-notify &-fade-leave-active {
    animation-fill-mode: forwards;
  }

  &-notify &-fade-entered {
    animation-duration: .4s;
    animation-timing-function: cubic-bezier(.99, .44, .44, 1.35);
  }

  &-notify &-fade-exited,
  &-notify &-fade-entering {
    opacity: 0;
  }

  // The same to @keyframe notificationMoveOut  100%.
  &-notify &-fade-exited {
    transform-origin: 0% 0%;
    transform: scaleY(.8);
    max-height: 0;
    overflow: hidden;
  }

  // Solve the problem of inconsistent width of custom content.
  &-notify {
    display: flex;
    flex-direction: column;
  }

  &-notify &-notice-wrapper {
    display: inline-block;
    flex: 0 0 auto;
  }

  &-bottom-left,
  &-top-left {
    align-items: flex-start;

    .@{notification-ns}-fade-entered {
      animation-name: notificationMoveInLeft;
    }
  }

  &-bottom-right,
  &-top-right {
    align-items: flex-end;

    .@{notification-ns}-fade-entered {
      animation-name: notificationMoveInRight;
    }
  }

  &-notify &-fade-leave-active {
    animation-duration: .3s;
    animation-timing-function: cubic-bezier(.64, .65, .57, 1.13);
    animation-name: notificationMoveOut;
  }
}

// Alternate styles
// -------------------------
// Generate contextual modifier classes for colorizing the alert.

.@{notification-ns}-success {
  .notifocation-variant(@notify-success-icon-color);
}

.@{notification-ns}-info {
  .notifocation-variant(@notify-info-icon-color);
}

.@{notification-ns}-warning {
  .notifocation-variant(@notify-warning-icon-color);
}

.@{notification-ns}-error {
  .notifocation-variant(@notify-error-icon-color);
}
